<html>
	<head>
		<title>学习分享管理</title>
		<script src="js/jquery-3.3.1.min.js"></script>

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
		 crossorigin="anonymous">
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
		 crossorigin="anonymous"></script>
		<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<link href="https://cdn.bootcss.com/mdui/0.4.3/css/mdui.min.css" rel="stylesheet">
		<script src="js/mdui.min.js"></script>

		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
		<!-- Latest compiled and minified Locales -->
		<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>


	</head>
	<style type="text/css">
		.mdui-btn {
			margin-right: 5px;
		}
	</style>

	<body class="mdui-theme-primary-light-blue mdui-theme-accent-blue">
		<h2 class="mdui-text-color-theme">学习分享管理</h2>
		<div id="content">
			<div id="tableArea">
				<table id="table"></table>
			</div>
		</div>





	</body>

	<script>
		var $$ = mdui.JQ;


		window.operateEvents = {

			"click .status": function(index, value, row) {
				changeSubmit(row.articleId, row.articleState)
			},
			"click .delete": function(index, value, row) {
				deleteSubmit(row.articleId)
			}
		}





		$("#table").bootstrapTable({
			url: 'http://prehealth.top/pre2.0/ArticleAdmin?article_type=1', //请求后台的URL（*）
			method: 'get', //请求方式（*）
			toolbar: '#toolbar', //工具按钮用哪个容器
			striped: true, //是否显示行间隔色
			cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination: true, //是否显示分页（*）
			sortOrder: "asc", //排序方式
			//    queryParams: oTableInit.queryParams,//传递参数（*）
			sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
			smartDisplay: true,
			pageNumber: 1, //初始化加载第一页，默认第一页
			pageSize: 9, //每页的记录行数（*）
			pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
			search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
			// showColumns: true,                  //是否显示所有的列
			showRefresh: true, //是否显示刷新按钮
			minimumCountColumns: 2, //最少允许的列数
			clickToSelect: true, //是否启用点击选中行
			height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			uniqueId: "articleId", //每一行的唯一标识，一般为主键列
			showExport: true, //是否显示导出
			exportDataType: "basic",
			columns: [{
				field: 'articleId',
				title: '文章编号',
				align: 'center',
			}, {
				field: 'userAdminId',
				title: '发布者',
				align: 'center',
				formatter: getName

			}, {
				field: 'articleTitle',
				title: '文章标题',
				align: 'center'
			}, {
				field: 'articleUserId',
				title: '主人公',
				align: 'center',

			}, {
				field: 'articleDate',
				title: '发布日期',
				align: 'center'
			}, {
				field: 'articleState',
				title: '公告状态',
				align: 'center',
				formatter: status
			}, {
				field: 'operation',
				title: '操作',
				align: 'center',
				events: operateEvents, //给按钮注册事件
				formatter: addFunctionAlty //表格中增加按钮 
			}]
		})




		function getuserName(userId) {
			var username;
			$$.ajax({
				url: "http://prehealth.top/pre2.0/userinfo/" + userId,
				method: "get",
				dataType: "json",
				data: {
					user_id: userId,

				},
				contentType: false,
				async: false,
				success: function(data) {
					username = data.userName;
					console.log(username)

				}
			});

			return username;


		}

		function getName(value, row, index) {
			var userqqq = getuserName(row.userAdminId);

			return ['<span>' + userqqq + '</span>'].join('');

		}





		function status(value, row, index) {

			switch (row.articleState) {
				case 0:
					return ['<span>下架</span>'].join('');
					break;
				case 1:
					return ['<span>上架</span>'].join('');
					break;
				case 2:
					return ['<span>未审核</span>'].join('');
					break;


			}
		}

		function addFunctionAlty() {
			return [

				'<button class="mdui-btn mdui-color-theme-accent mdui-ripple status">修改文章状态</button>',
				'<button class="mdui-btn mdui-color-theme-accent mdui-ripple delete">删除文章</button>'
			].join('')
		}




		function rm() {
			$(".myimg").remove();
		}


		function changeSubmit(articleId, articleState) {


			mdui.dialog({
				title: '修改文章状态',
				content: '您想要修改文章状态吗？',
				buttons: [{
						text: '下架',
						onClick: function(inst) {


							mdui.snackbar({
								message: '修改中...',
								position: 'right-top'
							});
							$$.ajax({
								method: 'PUT',
								url: 'http://prehealth.top/pre2.0/Article',
								dataType: "json",
								data: {
									articleId: articleId,
									articleState: 0
								},
								success: function(data) {
									$$("#submit").removeAttr("disabled");
									mdui.snackbar({
										message: '修改成功',
										position: 'right-top'
									});
									history.go(0)
								},
								fail: function() {
									$$("#submit").removeAttr("disabled");
									mdui.snackbar({
										message: '修改失败',
										position: 'right-top'
									});
								}
							});

						}
					},
					{
						text: '上架',
						onClick: function(inst) {


							mdui.snackbar({
								message: '修改中...',
								position: 'right-top'
							});
							$$.ajax({
								method: 'PUT',
								url: 'http://prehealth.top/pre2.0/Article',
								dataType: "json",
								data: {
									articleId: articleId,
									articleState: 1
								},
								success: function(data) {
									$$("#submit").removeAttr("disabled");
									mdui.snackbar({
										message: '修改成功',
										position: 'right-top'
									});
									history.go(0)
								},
								fail: function() {
									$$("#submit").removeAttr("disabled");
									mdui.snackbar({
										message: '修改失败',
										position: 'right-top'
									});
								}
							});

						}
					}
				]
			});
		};

		function deleteSubmit(articleId) {

			console.log(articleId)
			mdui.dialog({
				title: '删除文章',
				content: '您想要删除文章吗？',
				buttons: [{
						text: '取消'
					},
					{
						text: '确认',
						onClick: function(inst) {


							mdui.snackbar({
								message: '删除中...',
								position: 'right-top'
							});
							$$.ajax({
								method: 'DELETE',
								url: 'http://prehealth.top/pre2.0/Article/' + articleId,
								dataType: "json",
								data: {
									article_id: articleId

								},
								success: function(data) {
									$$("#submit").removeAttr("disabled");
									mdui.snackbar({
										message: '删除成功',
										position: 'right-top'
									});
									history.go(0)
								},
								fail: function() {
									$$("#submit").removeAttr("disabled");
									mdui.snackbar({
										message: '删除失败',
										position: 'right-top'
									});
								}
							});

						}
					}
				]
			});
		};
	</script>

</html>
